<template>
	<view>
			<div class="staff">
					<div class="staff_list" style="background-color: #D9D9D9;width:66.9%;position: fixed;"  >
						请选择
					</div><br><br>
					
					<!-- <div class="staff_list " v-for="(item,index) in dataSorce" :style="item.id == color_name ? text_color : ''"  @touchstart="setnames(item)">
						<checkbox-group @change="checkboxChange" >
							<label :key="item.id">
								<text >
									<checkbox :value="item.name" style="transform:scale(0.7)" />{{item.name}}
								</text>
							</label>
						</checkbox-group>
					</div> -->
				<scroll-view class="staff_b" scroll-y="true" touch-action=none; >
					<checkbox-group @change="checkboxChange">
					    <label class="uni-list-cell" v-for="item in dataSorce" :key="item.value">
					        <view>
					            <checkbox :value="item"/>{{item.name}}
					        </view>
					        <!-- <view>{{item.name}}</view> -->
					    </label>
					</checkbox-group>
				</scroll-view>
				
				<view class="staff_button">
					<button @click="buttonput">确定</button>
					<button @click="close">取消</button>
				</view>
			</div>
	</view>
</template>

<script>
	
	
export default {
	props:{
		dataSorc:{
			default: ''
		}
	},
	data(){
		return {
			dataSorce: '',
			color_name: '',
			text_color: '',
			result_data: []
			
			
		}
	},
	mounted(){
		console.log(this.dataSorc)
		this.dataSorce = this.dataSorc;
	},
	methods:{
		setnames(val){
			this.color_name = val.id;
			this.text_color = "color: #1890ff;";
		},
		buttonput(){
			console.log(this.result_data)
			if(this.result_data == ''){ 
				uni.showToast({
					title: '请选择一条信息',
					icon: 'error'
				})
				return false;
			}
			this.$emit('row',this.result_data);
		},
		close(){
			this.$emit('closes')
		},
		checkboxChange(e){
			console.log(e.detail.value)
		}
		
		
		
	}
}	
</script>

<style scoped lang="scss">
	.staff {
		background-color: #fff;
		width: 500rpx;
		height: 800rpx;
		border-radius: 4px;
		.staff_b {
			height: 85%;
			// overflow: auto;
		
		}
		
		.staff_button {
			display: flex;
			// padding: 20rpx 0 0 0;
			border-top: 1px solid #f0f0f0;
			button {
				font-size: 16px;
				background-color: #1890ff;
				color: #fff;
			}
		}
	}
	.staff_list {
		width: 90%;
		text-align: center;
		margin: auto;
		padding:20rpx 0 20rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}
	.staff_list_top {
		margin-top: 40rpx;
	}
</style>